<template>
    <div class="topic_list">

        <router-link :key="item.id" class="cell line1px" :to="{ name: 'topicview', params: { tid: item.id }}" v-for="item in topic">
            <a class="user_avatar pull-left" href="javascript:;">
                <img :src="item.author.avatar_url" title="huangjianke">
            </a>
            <span class="topiclist-tab" :class="{top: item.top}" v-text="item.top ? '置顶' : item.tab ? item.tab : '未知'"></span>
            <a class="topic_title" href="javascript:;" v-text="item.title"></a>
            <span class="reply_count">
                <span class="count_of_replies" title="回复数" v-text="item.reply_count"></span>
            </span>

        </router-link>

    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    props: {
        topic: {
            type: Array
        }
    }
}
</script>

<style scoped>
.topic_list {
}
.cell {
    display: flex;
    display: -webkit-flex;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    align-items: center;
    padding-bottom: 10px;
}
.user_avatar {

    flex: 0 0 .8rem;
}
.user_avatar img{
    width: .8rem;
    height: .8rem;
}
.topiclist-tab {
    flex: 0 0 1rem;
    background: #e5e5e5;
    padding: 2px 4px;
    color: #999;
    text-align: center;
    -webkit-border-radius: 3px;
    margin-left: 10px;
    margin-right: 10px;

}
.topiclist-tab.top {
    background: #80bd01;
    color: #fff;
}
.topic_title {
    flex: 1;
}
.reply_count {
    flex: 0 0 1rem;
    text-align: right;
}
</style>